<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>
      engine/design/task/UI_PieChart – PlaygroundOSS
    </title>
        <link rel="stylesheet" href="assets/trac.css" type="text/css"><link rel="stylesheet" href="assets/wiki.css" type="text/css">
    <script type="text/javascript" src="assets/jquery.js"></script><script type="text/javascript" src="assets/trac.js"></script><script type="text/javascript" src="assets/search.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        $("#content").find("h1,h2,h3,h4,h5,h6").addAnchor("このセクションへのリンク");
      });
    </script>
  </head>
  <body>
    <div id="main">
    <div id="content" class="wiki">
      <p class="path noprint">
        <br style="clear: both">
      </p>
      <div class="wikipage searchable">
        
          <h2 id="UI_PieChart">UI_PieChart<a title="このセクションへのリンク" href="#UI_PieChart" class="anchor"> ¶</a></h2>
<pre class="wiki">   &lt;task pointer&gt; = UI_PieChart( &lt;parent pointer&gt;, &lt;order&gt;, &lt;x&gt;, &lt;y&gt;, &lt;width&gt;, &lt;height&gt;,
                              &lt;image asset&gt;, &lt;start-angle&gt;, &lt;end-angle&gt; [ , &lt;anim time&gt;, &lt;initial-value&gt; ])
</pre><h3 id="引数">引数<a title="このセクションへのリンク" href="#%E5%BC%95%E6%95%B0" class="anchor"> ¶</a></h3>
<ul><li>&lt;parent pointer&gt; 親UIのポインタ
</li><li>&lt;order&gt; 表示プライオリティ
</li><li>&lt;x&gt;, &lt;y&gt; 表示座標
</li><li>&lt;width&gt;, &lt;height&gt; 円グラフ全体の表示域サイズ
</li><li>&lt;image asset&gt; 円グラフ変化部の画像
</li><li>&lt;start-angle&gt; 0.0点となる角度。単位はdegree(0～360)
</li><li>&lt;end-angle&gt; 1.0点となる角度。単位はdegree(&lt;start-angle&gt;+360.0まで)
</li><li>&lt;anim time&gt; 値を指定してから、実際にグラフの表示がその値に到達するまでのアニメーション時間(単位: [ms])。0を指定するとアニメーション無し。
</li><li>&lt;initial-value&gt; 初期値。0.0～1.0の間で指定(デフォルト値: 0.0)
</li></ul><h3 id="戻り値">戻り値<a title="このセクションへのリンク" href="#%E6%88%BB%E3%82%8A%E5%80%A4" class="anchor"> ¶</a></h3>
<ul><li>&lt;task pointer&gt; 生成された UI_PieChart タスクのポインタ
</li></ul><h3 id="解説">解説<a title="このセクションへのリンク" href="#%E8%A7%A3%E8%AA%AC" class="anchor"> ¶</a></h3>
<p>
指定された長方形のテクスチャを中心点を頂点とし、指定角度で切り取って表示する。
</p>
<p>
表示される角度は別途propertyやsysCommandで指定されるvalueの値(0.0～1.0)に比例する。
</p>
<p>
通常は円グラフの表示に用いられるが、画像表示上の効果としても応用できるかもしれない。
</p>
<p>
&lt;start-angle&gt; &lt;= &lt;end-angle&gt; の場合、&lt;value&gt;値の増加とともに円グラフは時計廻り方向に成長する。
</p>
<p>
&lt;start-angle&gt; &gt;= &lt;end-angle&gt; の場合、&lt;value&gt;値の増加とともに円グラフは反時計廻り方向に成長する。
</p>
<h3 id="制約事項">制約事項<a title="このセクションへのリンク" href="#%E5%88%B6%E7%B4%84%E4%BA%8B%E9%A0%85" class="anchor"> ¶</a></h3>
<p>
このタスクを使用する上では下記の制約がある。
</p>
<ul><li>使用される画像assetは、必ず4頂点かつ、頂点indexが左上から時計回りに割り当てられている必要がある。
</li><li>&lt;start-angle&gt;から&lt;end-angle&gt;までの角度は絶対値が360度を越えてはならない(例: &lt;start-angle&gt; = 270.0, &lt;end-angle&gt; = 630.0 などは可)。
</li><li>&lt;start-angle&gt;と&lt;end-angle&gt;の差の絶対値が315度を超えるとき、&lt;start-angle&gt;は45度単位で指定されねばならない。
</li></ul><p>
上記の制約に抵触する値を指定した場合の動作は保証されない。
</p>
<p>
二番目、三番目の制約がつく理由は下記の通り。
</p>
<p>
UI_PieChart は、指定されたテクスチャを下記のように45°単位で8つの三角形に分割し、
それぞれの三角形を45°までのタンジェントを用い必要な角度分だけ表示することで実現されている。
たとえば、0°位置から68°分だけを表示するならば、45°の三角形と23°の三角形二枚分となる。
</p>
<p>
<a style="padding:0; border:none" href="assets/piechart-1.png"><img src="assets/piechart-1.png"></a><a style="padding:0; border:none" href="assets/tan45.png"><img src="assets/tan45.png"></a>
</p>
<p>
このため、表示角が360°を超えた場合、重複して表示する分の三角形を持たないため、
&lt;start-angle&gt;から&lt;end-angle&gt;の間の角度は360°以下に限られる。
</p>
<p>
また、一つの45°エリアには一つの三角形しか割り当てられていない。
このため、開始角が45°境界に無い状態で、&lt;start-angle&gt;から&lt;end-angle&gt;の間が315°を超えると、
下記のような問題が起こりうる。
</p>
<p>
<a style="padding:0; border:none" href="assets/piechart-2.png"><img src="assets/piechart-2.png"></a>
</p>
<p>
下図において、右上の緑色に着色されたエリアには一つの三角形しかないが、
実際に描画すべき三角形が二つ分生じてしまう。このため、正しい表示を保証することができなくなる。
</p>
<p>
どうしてもこの制約に抵触する表現が必要な場合は、UI_PieChart の標準プロパティ .rot を使用して回転させることで実現できる。
</p>
<h3 id="コマンド">コマンド<a title="このセクションへのリンク" href="#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" class="anchor"> ¶</a></h3>
<dl><dt>UI_PIE_SET_START</dt><dd>
&lt;start-angle&gt;に相当する角度を指定する。
<ul><li>UI_PIE_SET_START
<pre class="wiki">   pPieChart = UI_PieChart(...)
   sysCommand(pPieChart, UI_PIE_SET_START, &lt;start-angle&gt;)
</pre></li></ul></dd></dl>
<dl><dt>UI_PIE_SET_END</dt><dd>
&lt;end-angle&gt;に相当する角度を指定する。
<ul><li>UI_PIE_SET_END
<pre class="wiki">   pPieChart = UI_PieChart(...)
   sysCommand(pPieChart, UI_PIE_SET_END, &lt;end-angle&gt;)
</pre></li></ul></dd></dl>
<dl><dt>UI_PIE_SET_VALUE</dt><dd>
円グラフの進捗を設定する。進捗は 0.0から 1.0の間(実数)で与える。
<ul><li>UI_PIE_SET_VALUE
<pre class="wiki">   pPieChart = UI_PieChart(...)
   sysCommand(pPieChart, UI_PIE_SET_VALUE, &lt;value&gt;)
</pre></li></ul></dd></dl>

        
        
      </div>
    </div>
    </div>
    <div id="footer" xml:lang="en" lang="en"><hr>
      <a id="tracpowered" href="http://trac.edgewall.org/"><img src="assets/trac_logo_mini.png" alt="Trac Powered" height="30" width="107"></a>
      <p class="left">
        By <a href="http://www.edgewall.org/">Edgewall Software</a>.
        <br>Translated by <a href="http://www.i-act.co.jp/">インタアクト株式会社</a>
      </p>
      <p class="right">Visit the Trac open source project at<br><a href="http://trac.edgewall.org/">http://trac.edgewall.org/</a></p>
    </div>
  
</body></html>
